<template>
	<view class="confirm-order">
		<NavBar title="确认订单" :isBack="true"></NavBar>
		<view class="content">
			<view class="header-area" @click="handleOpenAddress">
				<view v-if="addressDetail.name">
					<view class="user-msg">
						<view class="tag">默认</view>
						<view class="name">{{ addressDetail.name }} {{ addressDetail.mobile }}</view>
					</view>
					<view class="address">{{ addressDetail.address }}</view>
				</view>
				<view class="text" v-else>暂无地址，请添加地址</view>
				<image src="@/static/order/back.png"></image>
			</view>
			<view class="middle-area">
				<view class="goods-msg">
					<image class="goods-img" :src="goodsDetail.cover"></image>
					<view class="specific-msg">
						<view class="title">
							<view>{{ goodsDetail.title }}</view>
						</view>
						<view class="order-num">{{ goodsStyle.name }}</view>
						<view class="control">
							<view class="price">{{ goodsDetail.price }}</view>
							<NumCount v-model="num"></NumCount>
						</view>
					</view>
				</view>
				<view class="configuration">
					<view class="row service" @click="handleOpenServer">
						<view class="title">推荐服务点</view>
						<view v-if="serverDetail.title">
							{{ serverDetail.title }}
							<image src="@/static/order/unfold.png"></image>
						</view>
						<view class="text" v-else>暂无服务商，请添加服务商</view>
					</view>
					<view class="row">
						<input type="text" placeholder-class="remark" placeholder="订单备注">
					</view>
				</view>
			</view>
			<view class="footer-area">
				<view class="non-payment">
					<view class="total">
						<view>
							合计：
						</view>
						<view>
							<view class="price">¥ {{ totalPrice }}</view>
							<view class="freight">包含运费¥{{ goodsDetail.freight }}</view>
						</view>
					</view>
					<view class="btn">
						<view class="payment" @click="pay">立即支付</view>
					</view>
				</view>
			</view>
		</view>
		<addressDialog v-model="isAddress" :list="addressList" @success="handleAddressChange"></addressDialog>
		<serverDialog v-model="isServer" :list="serverList" @success="handleServerChange"></serverDialog>
	</view>
</template>

<script setup>
import NumCount from "@/components/NumCount.vue";
import addressDialog from './components/addressDialog.vue';
import serverDialog from './components/serverDialog.vue'
import { getAddress } from '@/api/address.js'
import { getServerNames } from '@/api/services.js'
import { orderConfirm } from '@/api/order.js'
import { reactive, toRefs, computed } from 'vue'
import { GoodsStore } from '@/stores/goods'
import { $gotoUrl } from '@/utils/utils'
import { onShow } from '@dcloudio/uni-app'

const store = GoodsStore()
const state = reactive({
	isServer: false,
	isAddress: false,
	serverList: [],
	serverDetail: {},
	addressList: [],
	addressDetail: {},
	num: store.goodsNum,
	goodsDetail: store.goodsDetail,
	goodsStyle: store.goodsStyle
})
//获取推荐服务商列表
async function getServerList () {
	const res = await getServerNames()
	state.serverList = res.data
	if (res.data.length) {
		state.serverDetail = res.data[0]
	}
	console.log("🚀 ~ getServerList ~ res:", res)
}
//选择服务商
function handleServerChange (item) {
	state.serverDetail = item
}
//获取地址列表
async function getList () {
	const res = await getAddress()
	state.addressList = res.data
	if (res.data.length) {
		state.addressDetail = res.data[0]
	}
}
//选择地址
function handleAddressChange (item) {
	state.addressDetail = item
}
//打开/添加地址
function handleOpenAddress () {
	if (state.addressDetail.name) {
		state.isAddress = true
	} else {
		$gotoUrl('/pages/my/address')
	}
}
//打开/添加服务商
function handleOpenServer () {
	if (serverDetail.title) {
		state.isServer = true
	} else {
		$gotoUrl('/pages/services/serviceProviders')
	}
}

//总价
const totalPrice = computed(() => {
	return state.goodsDetail.price * state.num
})

//调起微信支付
function payWx (res) {
	uni.requestPayment({
		"provider": "wxpay",	//支付方式  
		"timeStamp": res.data.timestamp,	//时间戳
		"signType": res.data.signType,	//签名算法，需要与后台下单时一致
		"paySign": res.data.paySign, //签名
		"nonceStr": res.data.nonceStr,	//随机字符串
		"package": res.data.package,	//接口返回的prepay_id
		success: function (resSuccess) {
			console.log("🚀 ~ payWx ~ resSuccess:", resSuccess)
		},

		fail: function (err) {
			console.log("🚀 ~ payWx ~ err:", err)
		}
	});
}
//请求支付
function pay () {
	const params = {
		addressid: state.addressDetail.id,
		shopid: state.goodsDetail.id,
		num: state.num,
		freight: Number(state.goodsDetail.freight),
		shopstyleid: state.goodsStyle.id,
		price: totalPrice.value,
		serverid: state.serverDetail.id
	}
	orderConfirm(params).then(res => {
		payWx(res)
	})
	// uni.navigateTo({
	// 	url: "/pages/order/paySuccess"
	// })
}
//初始化
onShow(() => {
	getList()
	getServerList()
})
const {
	isServer,
	isAddress,
	num,
	goodsStyle,
	goodsDetail,
	serverDetail,
	serverList,
	addressDetail,
	addressList
} = toRefs(state)
</script>

<style lang="scss" scoped>
.confirm-order {
	.content {
		position: relative;
		padding: 36rpx;

		.header-area,
		.middle-area {
			padding: 36rpx;
			background: #FFFFFF;
			border-radius: 22rpx 22rpx 22rpx 22rpx;
			margin-bottom: 36rpx;
		}

		.header-area {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.user-msg {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				.tag {
					width: 52rpx;
					height: 30rpx;
					line-height: 30rpx;
					background: #58DBCF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-weight: bold;
					font-size: 16rpx;
					color: #FFFFFF;
					text-align: center;
					margin-right: 20rpx;
				}
			}

			.address {
				width: 532rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}

			image {
				width: 14rpx;
				height: 24rpx;
			}
		}

		.middle-area {
			.goods-msg {
				display: flex;
				margin-bottom: 36rpx;
			}

			.goods-img {
				width: 155rpx;
				height: 155rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-right: 24rpx;
			}

			.specific-msg {
				width: 440rpx;

				.title {
					display: flex;
					align-items: center;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}

				.order-num {
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
					margin: 8rpx 0rpx 40rpx;
				}

				.control {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.price {
						font-weight: 800;
						font-size: 30rpx;
						color: #FF0000;
					}
				}

			}

			.configuration {
				.row:first-child {
					margin-bottom: 26rpx;
				}

				.row {
					width: 606rpx;
					height: 86rpx;
					background: #F5F5F5;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					padding: 26rpx 24rpx;
					box-sizing: border-box;

					input {
						font-size: 24rpx;
						color: #333333;
					}

					.remark {
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
					}
				}

				.service {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;

					.title {
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
					}

					image {
						width: 26rpx;
						height: 18rpx;
						margin-left: 16rpx;
					}
				}
			}

			.footer-area {
				position: fixed;
				left: 0rpx;
				right: 0rpx;
				bottom: 0rpx;
				height: 166rpx;
				background: #FFFFFF;
				padding: 18rpx 36rpx;
				box-sizing: border-box;

				.non-payment {
					display: flex;
					justify-content: space-between;
				}

				.total {
					display: flex;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;

					.price {
						font-weight: 800;
						font-size: 32rpx;
						color: #FF0000;
					}

					.freight {
						font-weight: 500;
						font-size: 16rpx;
						color: #FF0000;
					}
				}

				.btn {
					display: flex;
					justify-content: flex-end;
					align-items: flex-start;

					.payment {
						padding: 12rpx 36rpx;
						border-radius: 500rpx;
						font-weight: 800;
						font-size: 30rpx;
						color: #FF0000;
					}
				}

			}
		}

		.footer-area {
			position: fixed;
			left: 0rpx;
			right: 0rpx;
			bottom: 0rpx;
			height: 166rpx;
			background: #FFFFFF;
			padding: 18rpx 36rpx;
			box-sizing: border-box;

			.non-payment {
				display: flex;
				justify-content: space-between;
			}

			.total {
				display: flex;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;

				.price {
					font-weight: 800;
					font-size: 32rpx;
					color: #FF0000;
				}

				.freight {
					font-weight: 500;
					font-size: 16rpx;
					color: #FF0000;
				}
			}

			.btn {
				display: flex;
				justify-content: flex-end;
				align-items: flex-start;

				.payment {
					padding: 12rpx 36rpx;
					border-radius: 500rpx;
					font-weight: 800;
					font-size: 30rpx;
					color: #FFFFFF;
					background: #58DBCF;
				}
			}
		}
	}

}
</style>